<template>
    <div>
        <van-popup v-model="show" position="bottom">
            <van-datetime-picker :type="type" v-model="currentDate" :min-date="min" @cancel="cancel" @confirm="confirm" />
        </van-popup>
    </div>
</template>

<script>
export default {
    data () {
        return {
            show: false,
            min: new Date(),
            currentDate: new Date(),
        };
    },
    props: {
        value: {
            required: false,
            type: String,
            default: ''
        },
        minDate: {
            required: false,
            type: String,
            default: ''
        },
        type: {
            required: false,
            type: String,
            default: 'date'
        }
    },
    watch: {
        value (v) {
            if (v) {
                this.currentDate = new Date(v);
            }
        },
        minDate (v) {
            if (v) {
                this.min = new Date(v);
            }
        },
    },
    created () {
        if (this.value) {
            this.currentDate = new Date(this.value);
        }
        if (this.minDate) {
            this.currentDate = new Date(this.minDate);
        }
    },
    methods: {
        selectTime () {
            this.show = true
        },
        cancel () {
            this.show = false;
            console.log("李寻欢");
        },
        confirm (value) {
            this.show = false;
            this.$emit('getTime', value)
        },

    },


}
</script>

<style lang="scss" scoped>
/deep/.van-picker__cancel,
.van-picker__confirm {
  color: #333;
  font-size: 17px;
}
/deep/.van-picker__confirm {
  color: #ff8f44;
  font-size: 17px;
}
//+
.van-hairline::after,
.van-hairline--bottom::after {
  border: none;
}
</style>